<template>
	<view>
		<view class="itemBox" >
			<view class="left">
				<view class="icon-box">
					<!-- <uni-icons class="icon" color="#fff" type="paperplane" size="20"></uni-icons> -->
					<image src="../../static/img/address-icon.png"></image>
				</view>
			</view>

			<view class="textView">
				<view class="title1">
					{{item.name}} <text class="phone">{{item.phone}}</text> <text class="moren">默认</text>
				</view>
				<view class="title2">{{item.region}} {{item.address}}</view>
			</view>
			<view class="title3"><uni-icons type="right" color="#E67817" size="15"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				swipeList: [


				],
				// item: {
				// 	name: '穆里尼奥',
				// 	phone: '150-XXXX-7812',
				// 	address: '重庆市南岸区海棠和鸿南山道18栋鸿南山道18栋',
				// 	id: 2
				// },


			}
		},
		props: {
			item: {
				type: Object,
				default: () => ({})
			}
			 
		
		},
		onLoad() {
			this.init()
		},
		onShow() {
			// this.initData()
		},
		onReachBottom() {
			// 触底分页
			console.log('触底')
			// if (this.total > this.list.length) {
			// 	this.page = parseInt(this.page) + 1
			// }
		},
		methods: {
			// 选择其他
			choice() {
				console.log('选择其他')
			},
			init() {

				let list = [{
						name: '穆里尼奥',
						phone: '150-XXXX-7812',
						address: '重庆市南岸区海棠和鸿南山道18栋鸿南山道18栋',
						id: 2
					},
					{
						name: '郑毅',
						phone: '150-XXXX-7812',
						address: '重庆市南岸区海棠和鸿南山道18栋鸿南山道19栋',
						id: 2
					},
				]

			},
			// 数据请求示例
			initData() {
				let _this = this;
				_this.$http.fetchData({
					url: '/api/biaoduan',
					method: 'GET',
					data: {},
					success(res) {
						// uni.showToast({
						// 	title: res.message,
						// 	icon: 'none'
						// });
						_this.list = [..._this.list, ...res.data]
						this.total = res.total
						let listData = res.data
						if (res.total == 1) {
							let id = listData[0].id
							let total = this.total
							let paramsStr = `?biaoduan_id=${id}&biaoduanTotal=${total}`
							uni.redirectTo({
								url: `/pages/procedureList/procedureList${paramsStr}`
							})
						}
					}
				})
			},
			// 查看详情
			getItem(item) {
				console.log(item.id)
				let id = item.id
				let paramsStr = `?biaoduan_id=${id}&biaoduanTotal=${this.total}`
				uni.navigateTo({
					url: `/pages/procedureList/procedureList${paramsStr}`
				})
			},
			// 弹窗
			open() {
				this.$refs.popup.open('center')
			},
			// 关闭弹窗
			close() {
				this.$refs.popup.close()
				this.$refs.swipeAction.closeAll()
			},
			swipeChange(e, index) {
				console.log('返回：', e);
				console.log('当前索引：', index);
			},
			swipeClick(e, index) {
				let {
					content
				} = e;
				if (content.text === '删除') {
					// uni.showModal({
					// 	title: '提示',
					// 	content: '是否删除',
					// 	success: res => {
					// 		if (res.confirm) {
					// 			this.swipeList.splice(index, 1);
					// 		} else if (res.cancel) {
					// 			console.log('用户点击取消');
					// 		}
					// 	}
					// });
					this.$refs.popup.open('center')

				} else if (content.text === '添加') {
					if (this.swipeList.length < 10) {
						this.swipeList.push({
							id: new Date().getTime(),
							options: [{
									text: '置顶'
								},
								{
									text: '标记为已读',
									style: {
										backgroundColor: 'rgb(254,156,1)'
									}
								},
								{
									text: '删除',
									style: {
										backgroundColor: 'rgb(255,58,49)'
									}
								}
							],
							content: '新增' + new Date().getTime()
						});
						uni.showToast({
							title: `添加了一条数据`,
							icon: 'none'
						});
					} else {
						uni.showToast({
							title: `最多添加十条数据`,
							icon: 'none'
						});
					}
				} else {
					uni.showToast({
						title: `点击了${e.content.text}按钮`,
						icon: 'none'
					});
				}
			},
			addAddress(item) {
				console.log(item)
				let id = item.id || 0

				let paramsStr = `?id=${id}`
				uni.navigateTo({
					url: `/pages/mine/addAddress${paramsStr}`
				})
			},


		}
	}
</script>

<style scoped>
	.itemBox {
		display: flex;
		padding: 30rpx 24rpx;
		padding-right: 0;
		background: #ffffff;
		border-radius: 10rpx;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(93, 69, 41, 0.25);
	}

	.left {
		width: 62rpx;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.icon-box {
		width: 62rpx;
		height: 62rpx;
		background: linear-gradient(180deg, #f8deb1, #efbe77);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;

	}
	.icon-box image {
		width: 62rpx;
		height: 62rpx;
		/* background: linear-gradient(180deg, #f8deb1, #efbe77); */
		border-radius: 50%;
	}
	.textView {
		flex: 1;
		padding-left: 26rpx;

	}

	.title3 {
		width: 120rpx;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #c2c2c2;
	}

	.title1 {
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		color: #5d4529;
	}

	.title1 .phone {
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		text-align: left;
		color: #5d4529;
		margin-left: 16rpx;
		margin-right: 12rpx;
	}

	.title1 .moren {
		line-height: 40rpx;
		background: #ffe6d1;
		border-radius: 10rpx;
		text-align: center;
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #e67817;
		padding: 4rpx 18rpx;
		display: inline-block;
	}

	.title2 {
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #5d4529;
		margin-top: 16rpx;
	}
</style>